<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .box{
          /*border:1px solid;*/
          border-radius:10px;
          width:1000px;
          height:20px;

        }
        .box1{
          /*border:1px solid;*/
          border-radius:10px;
          width:10px;
          height:20px;
          background-color:#747474;

        }
        .span{
            float:left;
            /*margin-left:10px;*/
        }
        #num{
          margin-left:500px;
          color:white;
        }
    </style>
</head>
<body>
    <h1>进度条</h1>
    <hr>
    
    <div class="box span" >
       <div class="box1" id="box1" style="width:10px">
            <div id="num" ></div>
       </div>
    </div>

    <div class="span">
        <button onclick="local()" id="but">下载</button>
    </div>
<script>
          var mark = 0;
         var num = 1;  
    function local(){
         mark++;
         console.log(mark);

         var time = document.getElementById('box1');
         var count = document.getElementById('num');
         // 计时器方法
         var func = function(){
            num++;
           document.getElementById('num').style.marginLeft = num*5 + 'px';

           count.innerHTML = num + '%';
           var a = time.style.width;
           var b = parseInt(a) + 10;
           time.style.width = b + 'px';
           // 判断 完成时
           if(num == 100){
            clearInterval(set);
            document.getElementById('but').innerHTML = '已完成';
            document.getElementById('but').onclick = null;
            alert('已完成');
            }
         }
          // 判断何时停止
         if (mark%2!==0) {
            set = setInterval(func,10);
            document.getElementById('but').innerHTML = '暂停';

         }
         // 判断何时开始
          if(mark%2==0){
          document.getElementById('but').innerHTML = '开始';

          console.log(num);
          clearInterval(set);
          return num;
          }
        


    }


</script>
</body>
</html>